Communicating with Interactive Articles

Examining the design of interactive articles by synthesizing theory from disciplines such as education, journalism, and visualization.

Authors

Affiliations

Fred Hohman

Georgia Tech

Matthew Conlen

University of Washington

Jeffrey Heer

University of Washington

Duen Horng (Polo) Chau

Georgia Tech

Published

Sept. 11, 2020

DOI

10.23915/distill.00028

Computing has changed how people communicate. The transmission of news, messages, and ideas is instant. Anyone’s voice can be heard. In fact, access to digital communication technologies such as the Internet is so fundamental to daily life that their disruption by government is condemned by the United Nations Human Rights Council . But while the technology to distribute our ideas has grown in leaps and bounds, the interfaces have remained largely the same.

Parallel to the development of the internet, researchers like Alan Kay and Douglas Engelbart worked to build technology that would empower individuals and enhance cognition. Kay imagined the Dynabook in the hands of children across the world. Engelbart, while best remembered for his “mother of all demos,” was more interested in the ability of computation to augment human intellect . Neal Stephenson wrote speculative fiction that imagined interactive paper that could display videos and interfaces, and books that could teach and respond to their readers .

More recent designs (though still historical by personal computing standards) point to a future where computers are connected and assist people in decision-making and communicating using rich graphics and interactive user interfaces . While some technologies have seen mainstream adoption, such as Hypertext , unfortunately, many others have not. The most popular publishing platforms, for example WordPress and Medium, choose to prioritize social features and ease-of-use while limiting the ability for authors to communicate using the dynamic features of the web.

In the spirit of previous computer-assisted cognition technologies, a new type of computational communication medium has emerged that leverages active reading techniques to make ideas more accessible to a broad range of people. These interactive articles build on a long history, from Plato to PHeT to explorable explanations . They have been shown to be more engaging, can help improve recall and learning, and attract broad readership and acclaim,For example, some of The New York Times and The Washington Post’s most read articles are interactive stories. yet we do not know that much about them.

In this work, for the the first time, we connect the dots between interactive articles such as those featured in this journal and publications like The New York Times and the techniques, theories, and empirical evaluations put forth by academic researchers across the fields of education, human-computer interaction, information visualization, and digital journalism. We show how digital designers are operationalizing these ideas to create interactive articles that help boost learning and engagement for their readers compared to static alternatives.

Today there is a growing excitement around the use of interactive articles for communication since they offer unique capabilities to help people learn and engage with complex ideas that traditional media lacks. After describing the affordances of interactive articles, we provide critical reflections from our own experience with open-source, interactive publishing at scale. We conclude with discussing practical challenges and open research directions for authoring, designing, and publishing interactive articles.

This style of communication — and the platforms which support it — are still in their infancy. When choosing where to publish this work, we wanted the medium to reflect the message. Journals like Distill are not only pushing the boundaries of machine learning research but also offer a space to put forth new interfaces for dissemination. This work ties together the theory and practice of authoring and publishing interactive articles. It demonstrates the power that the medium has for providing new representations and interactions to make systems and ideas more accessible to broad audiences.

Interactive Articles: Theory & Practice

Interactive articles draw from and connect many types of media, from static text and images to movies and animations. But in contrast to these existing forms, they also leverage interaction techniques such as details-on demand, belief elicitation, play, and models and simulations to enhance communication.

While the space of possible designs is far too broad to be solved with one-size-fits-all guidelines, by connecting the techniques used in these articles back to underlying theories presented across disparate fields of research we provide a missing foundation for designers to use when considering the broad space of interactions that could be added to a born-digital article.

We draw from a corpus of over sixty interactive articles to highlight the breadth of techniques available and analyze how their authors took advantage of a digital medium to improve the reading experience along one or more dimensions, for example, by reducing the overall cognitive load, instilling positive affect, or improving information recall.

Because diverse communities create interactive content, this medium goes by many different names and has not yet settled on a standardized format nor definition.However, one is taking shape. Researchers have proposed artifacts such as explorable multiverse analyses , explainables , and exploranations to more effectively disseminate their work, communicate their results to the public, and remove research debt . In newsrooms, data journalists, developers, and designers work together to make complex news and investigative reporting clear and engaging using interactive stories . Educators use interactive textbooks as an alternative learning format to give students hands-on experience with learning material .

Besides these groups, others such as academics, game developers, web developers, and designers blend editorial, design, and programming skills to create and publish explorable explanations , interactive fiction , interactive non-fiction , active essays , and interactive games . While these all slightly differ in their technical approach and target audience, they all largely leverage the interactivity of the modern web.

We focus on five unique affordances of interactive articles, listed below. In-line videos and example interactive graphics are presented alongside this discussion to demonstrate specific techniques.

Connecting People and Data

As visual designers are well aware, and as journalism researchers have confirmed empirically , an audience which finds content to be aesthetically pleasing is more likely to have a positive attitude towards it. This in turn means people will spend more time engaging with content and ultimately lead to improved learning outcomes. While engagement itself may not be an end goal of most research communications, the ability to influence both audience attitude and the amount of time that is spent is a useful lever to improve learning: we know from education research that both time spent and emotion are predictive of learning outcomes.

Animations can also be used to improve engagement . While there is debate amongst researchers if animations in general are able to more effectively convey the same information compared to a well designed static graphic , animation has been shown to be effective specifically for communicating state transitions , uncertainty , causality , and constructing narratives . A classic example of this is Muybridge’s motion study that can be seen in 3: while the series of still images may be more effective for answering specific questions like, “Does a horse lift all four of its feet off the ground when it runs?” watching the animation in slow motion gives the viewer a much more visceral sense of how it runs. A more modern example can be found in OpenAI’s reporting on their hide-and-seek agents . The animations here instantly give the viewer a sense of how the agents are operating in their environment.

Passively, animation can be used to add drama to a graphic displaying important information, but which readers may otherwise find dry. Scientific data which is inherently time varying may be shown using an animation to connect viewers more closely with the original data, as compared to seeing an abstracted static view. For example, Ed Hawkins designed “Climate Spirals,” which shows the average global temperature change over time . This presentation of the data resonated with a large public audience, so much so that it was displayed at the opening ceremony at the 2016 Rio Olympics. In fact, many other climate change visualizations of this same dataset use animation to build suspense and highlight the recent spike in global temperatures .

By adding variation over time, authors have access to a new dimension to encode information and an even wider design space to work in. Consider the animated graphic in The New York Times story “Extensive Data Shows Punishing Reach of Racism for Black Boys,” which shows economic outcomes for 10,000 men who grew up in rich families . While there are many ways in which the same data could have been communicated more succinctly using a static visualization , by utilizing animation, it became possible for the authors to design a unit visualization in which each data point shown represented an individual, reminding readers that the data in this story was about real peoples’ lives.

Unit visualizations have also been used to evoke empathy in readers in other works covering grim topics such as gun deaths and soldier deaths in war . Using person-shaped glyphs (as opposed to abstract symbols like circles or squares) has been shown not to produce additional empathic responses , but including actual photographs of people helps readers gain interest in, remember , and communicate complex phenomena using visualizations. Correll argues that much of the power of visualization comes from abstraction, but quantization stymies empathy . He instead suggests anthropomorphizing data, borrowing journalistic and rhetoric techniques to create novel designs or interventions to foster empathy in readers when viewing visualizations .

Regarding the format of interactive articles, an ongoing debate within the data journalism community has been whether articles which utilize scroll-based graphics (scrollytelling) are more effective than those which use step-based graphics (slideshows). McKenna et al. found that their study participants largely preferred content to be displayed with a step- or scroll-based navigation as opposed to traditional static articles, but did not find a significant difference in engagement between the two layouts. In related work, Zhi et al. found that performance on comprehension tasks was better in slideshow layouts than in vertical scroll-based layouts . Both studies focused on people using desktop (rather than mobile) devices. More work is needed to evaluate the effectiveness of various layouts on mobile devices, however the interviews conducted by MckEnna et al. suggest that additional features, such as supporting navigation through swipe gestures, may be necessary to facilitate the mobile reading experience.

The use of games to convey information has been explored in the domains of journalism and education . Designers of newsgames use them to help readers build empathy with their subject, for example in The Financial Times’s “Uber Game” , and explain complex systems consisting of multiple parts, for example in Wired’s “Cutthroat Capitalism: The Game” . In educational settings the use of games has been shown to motivate students while maintaining or improving learning outcomes .

As text moves away from author-guided narratives towards more reader-driven ones , the reading experience becomes closer to that of playing a game. For example, the critically acclaimed explorable explanation “Parable of the Polygons” puts play at the center of the story, letting a reader manually run an algorithm that is later simulated in the article to demonstrate how a population of people with slight personal biases against diversity leads to social segregation .

Making Systems Playful

Interactive articles utilize an underlying computational infrastructure, allowing authors editorial control over the computational processes happening on a page. This access to computation allows interactive articles to engage readers in an experience they could not have with traditional media. For example, in “Drawing Dynamic Visualizations”, Victor demonstrates how an interactive visualization can allow readers to build an intuition about the behavior of a system, leading to a fundamentally different understanding of an underlying system compared to looking at a set of static equations . These articles leverage active learning and reading, combined with critical thinking to help diverse sets of people learn and explore using sandboxed models and simulations .

Complex systems often require extensive setup to allow for proper study: conducting scientific experiments, training machine learning models, modeling social phenomenon, digesting advanced mathematics, and researching recent political events, all require the configuration of sophisticated software packages before a user can interact with a system at all, even just to tweak a single parameter. This barrier to entry can deter people from engaging with complex topics, or explicitly prevent people who do not have the necessary resources, for example, computer hardware for intense machine learning tasks. Interactive articles drastically lower these barriers.

Science that utilizes physical and computational experiments requires systematically controlling and changing parameters to observe their effect on the modeled system. In research, dissemination is typically done through static documents, where various figures show and compare the effect of varying particular parameters. However, efforts have been made to leverage interactivity in academic publishing, summarized in . Reimagining the research paper with interactive graphics , as exploranations , or as explorable multiverse analyses , gives readers control over the reporting of the research findings and shows great promise in helping readers both digest new ideas and learn about existing fields that are built upon piles of research debt .

Beyond reporting statistics, interactive articles are extremely powerful when the studied systems can be modeled or simulated in real-time with interactive parameters without setup, e.g., in-browser sandboxes. Consider the example in 4 of a Boids simulation that models how birds flock together. Complex systems such as these have many different parameters that change the resulting simulation. These sandbox simulations allow readers to play with parameters to see their effect without worrying about technical overhead or other experimental consequences.

This is a standout design pattern within interactive articles, and many examples exist ranging in complexity. “How You Will Die” visually simulates the average life expectancy of different groups of people, where a reader can choose the gender, race, and age of a person . “On Particle Physics” allows readers to experiment with accelerating different particles through electric and magnetic fields to build intuition behind electromagnetism foundations such as the Lorentz force and Maxwell’s equations — the experiments backing these simulations cannot be done without multi-million dollar machinery . “Should Prison Sentences Be Based On Crimes That Haven’t Been Committed Yet?” shows the outcome of calculating risk assessments for recidivism where readers adjust the thresholds for determining who gets parole .

The dissemination of modern machine learning techniques has been bolstered by interactive models and simulations. Three articles, “How to Use t-SNE Effectively” , “The Beginner’s Guide to Dimensionality Reduction” , and “Understanding UMAP” show the effect that hyperparameters and different dimensionality reduction techniques have on creating low dimensional embeddings of high-dimensional data. A popular approach is to demonstrate how machine learning models work with in-browser models , for example, letting readers use their own video camera as input to an image classification model or handwriting as input to a stroke prediction model . Other examples are aimed at technical readers who wish to learn about specific concepts within deep learning. Here, interfaces allow readers to choose model hyperparameters, datasets, and training procedures that, once selected, visualize the training process and model internals to inspect the effect of varying the model configuration .

Interactive articles commonly communicate a single idea or concept using multiple representations. The same information represented in different forms can have different impact. For example, in mathematics often a single object has both an algebraic and a geometric representation. A clear example of this is the definition of a circle . Both are useful, inform one another, and lead to different ways of thinking. Examples of interactive articles that demonstrate this include various media publications’ political election coverage that break down the same outcome in multiple ways, for example, by voter demographics, geographical location, and historical perspective .

The Multimedia Principle states that people learn better from words and pictures rather than words or pictures alone , as people can process information through both a visual channel and auditory channel simultaneously. Popular video creators such as 3Blue1Brown and Primer exemplify these principles by using rich animation and simultaneous narration to break down complex topics. These videos additionally take advantage of the Redundancy Principle by including complementary information in the narration and in the graphics rather than repeating the same information in both channels .

While these videos are praised for their approachability and rich exposition, they are not interactive. One radical extension from traditional video content is also incorporating user input into the video while narration plays. A series of these interactive videos on “Visualizing Quaternions” lets a reader listen to narration of a live animation on screen, but at any time the viewer can take control of the video and manipulate the animation and graphics while simultaneously listening to the narration .

Utilizing multiple representations allows a reader to see different abstractions of a single idea. Once these are familiar and known, an author can build interfaces from multiple representations and let readers interact with them simultaneously, ultimately leading to interactive experiences that demonstrate the power of computational communication mediums. Next, we discuss such experiences where interactive articles have transformed communication and learning by making live models and simulations of complex systems and phenomena accessible.

Prompting Self-Reflection

Asking a student to reflect on material that they are studying and explain it back to themselves — a learning technique called self-explanation — is known to have a positive impact on learning outcomes . By generating explanations and refining them as new information is obtained, it is hypothesized that a student will be more engaged with the processes which they are studying . When writing for an interactive environment, components can be included which prompt readers to make a prediction or reflection about the material and cause them to engage in self-explanation .

While these prompts may take the form of text entry or other standard input widgets, one of the most prominent examples of this technique used in practice comes from The New York Times “You Draw It” visualizations . In these visualizations, readers are prompted to complete a trendline on a chart, causing them to generate an explanation based on their current beliefs for why they think the trend may move in a certain direction. Only after readers make their prediction are they shown the actual data. Kim et al. showed that using visualizations as a prompt is an effective way to encourage readers to engage in self explanation and improve their recall of the information . 5 shows one these visualizations for CO₂ emissions from burning fossil fuels. After clicking and dragging to guess the trend, your guess will be compared against the actual data.

In the case of “You Draw It,” readers were also shown the predictions that others made, adding a social comparison element to the experience. This additional social information was not shown to necessarily be effective for improving recall . However, one might hypothesize that this social aspect may have other benefits such as improving reader engagement, due to the popularity of recent visual stories using this technique, for example in The Pudding’s “Gyllenhaal Experiment” and Quartz’s “How do you draw a circle?” .

Prompting readers to remember previously presented material, for example through the use of quizzes, can be an effective way to improve their ability to recall it in the future . This result from cognitive psychology, known as the testing effect , can be utilized by authors writing for an interactive medium . While testing may call to mind stressful educational experiences for many, quizzes included in web articles can be low stakes: there is no need to record the results or grade readers. The effect is enhanced if feedback is given to the quiz-takers, for example by providing the correct answer after the user has recorded their response .

The benefits of the testing effect can be further enhanced if the testing is repeated over a period of time , assuming readers are willing to participate in the process. The idea of spaced repetition has been a popular foundation for memory building applications, for example in the Anki flash card system. More recently, authors have experimented with building spaced repetition directly into their web-based writing , giving motivated readers the opportunity to easily opt-in to a repeated testing program over the relevant material.

Personalizing Reading

Content personalization — automatically modifying text and multimedia based on a reader’s individual features or input (e.g., demographics or location) — is a technique that has been shown to increase engagement and learning within readers and support behavioral change . The PersaLog system gives developers tools to build personalized content and presents guidelines for personalization based on user research from practicing journalists . Other work has shown that “personalized spatial analogies,” presenting distance measurements in regions where readers are geographically familiar with, help people more concretely understand new distance measurements within news stories .

Personalization alone has also been used as the standout feature of multiple interactive articles. Both “How Much Hotter Is Your Hometown Than When You Were Born?” and “Human Terrain” use a reader’s location to drive stories relating to climate change and population densities respectively. Other examples ask for explicit reader input, such as a story that visualizes a reader’s net worth to challenge a reader’s assumptions if they are wealthy or not (relative to the greater population) , or predicting a reader’s political party affiliation . Another example is the interactive scatterplot featured in “Find Out If Your Job Will Be Automated” . In this visualization, professions are plotted to determine their likelihood of being automated against their average annual wage. The article encourages readers to use the search bar to type in their own profession to highlight it against the others.

An interactive medium has the potential to offer readers an experience other than static, linear text. Non-linear stories, where a reader can choose their own path through the content, have the potential to provide a more personalized experience and focus on areas of user interest . For example, the BBC has used this technique in both online articles and in a recent episode of “Click” , a technology focused news television program. Non-linear stories present challenges for authors, as they must consider the myriad possible paths through the content, and consider the different possible experiences that the audience would have when pursuing different branches.

Another technique interactive articles often use is segmenting content into small pieces to be read in-between or alongside other graphics. While we have already discussed cognitive load theory, the Segmenting Theory, the idea that complex lessons are broken into smaller, bit-sized parts , also supports personalization within interactive articles. Providing a reader the ability to play, pause, and scrub content allows the reader to move at their own speed, comprehending the information at a speed that works best for them. Segmenting also engages a reader’s essential processing without overloading their cognitive system .

Multiple studies have been conducted showing that learners perform better when information is segmented, whether it be only within an animation or within an interface with textual descriptions . One excellent example of using segmentation and animation to personalize content delivery is “A Visual Introduction to Machine Learning,” which introduces fundamental concepts within machine learning in bite-sized pieces, while transforming a single dataset into a trained machine learning model . Extending this idea, in “Quantum Country,” an interactive textbook covering quantum computing, the authors implemented a user account system, allowing readers to save their position in the text and consume the content at their own pace . This book further utilizes the interactive medium by utilizing spaced repetition that helps improve recall.

Reducing Cognitive Load

Authors must calibrate the detail at which to discuss ideas and content to their readers expertise and interest to not overload them. When topics become multifaceted and complex, a balance must be struck between a high-level overview of a topic and its lower-level details. One interaction technique used to prevent a cognitive overload within a reader is “details-on-demand.”

Details-on-demand has become an ubiquitous design pattern. For example, modern operating systems offer to fetch dictionary definitions when a word is highlighted. When applied to visualization, this technique allows users to select parts of a dataset to be shown in more detail while maintaining a broad overview. This is particularly useful when a change of view is not required, so that users can inspect elements of interest on a point-by-point basis in the context of the whole . Below we highlight areas where details-on-demand has been successfully applied to reduce the amount of information present within an interface at once.

Data Visualization

Details-on-demand is core to information visualization, and concludes the seminal Visual Information-Seeking Mantra: “Overview first, zoom and filter, then details-on-demand” . Successful visualizations not only provide the base representations and techniques for these three steps, but also bridge the gaps between them . In practice, the solidified standard for details-on-demand in data visualization manifests as a tooltip, typically summoned on a cursor mouseover, that presents extra information in an overlay. Given that datasets often contain multiple attributes, tooltips can show the other attributes that are not currently encoded visually , for example, the map in 6 that shows where different types of birdsongs where recorded and what they sound like.

Illustration

Details-on-demand is also used in illustrations, interactive textbooks, and museum exhibits, where highlighted segments of a figure can be selected to display additional information about the particular segment. For example, in “How does the eye work?” readers can select segments of an anatomical diagram of the human eye to learn more about specific regions, e.g., rods and cones . Another example is “Earth Primer,” an interactive textbook on tablets that allows readers to inspect the Earth’s interior, surface, and biomes . Each illustration contains segments the reader can tap to learn and explore in depth. 7 demonstrates this by pointing out specific regions in machine-generated imagery to help people spot fake images.

Mathematical Notation

Formal mathematics, a historically static medium, can benefit from details-on-demand, for example, to elucidate a reader with intuition about a particular algebraic term, present a geometric interpretation of an equation, or to help a reader retain high-level context while digesting technical details.See this list of examples that experiment with applying new design techniques to various mathematical notation. For example, in “Why Momentum Really Works,” equation layout is done using Gestalt principles plus annotation to help a reader easily identify specific terms. In “Colorized Math Equations,” the Fourier transform equation is presented in both mathematical notation and plain text, but the two are linked through a mouseover that highlights which term in the equation corresponds to which word in the text . Another example that visualizes mathematics and computation is the “Image Kernels” tutorial where a reader can mouseover a real image and observe the effect and exact computation for applying a filter over the image . Instead of writing down long arithmetic sums, the interface allows readers to quickly see the summation operation’s terms and output. In 8, one of Maxwell’s equations is shown. Click the two buttons to reveal, or remind yourself, what each notation mark and variable represent.

Text

While not as pervasive, text documents and other long-form textual mediums have also experimented with letting readers choose a variable level of detail to read. This idea was explored as early as the 1960s in StretchText, a hypertext feature that allows a reader to reveal a more descriptive or exhaustive explanation of something by expanding or contracting the content in place . The idea has resurfaced in more recent examples, including “On Variable Level-of-detail Documents” , a PhD thesis turned interactive article , and the call for proposals of The Parametric Press . One challenge that has limited this technique’s adoption is the burden it places on authors to write multiple versions of their content. For example, drag the slider in 9 to read descriptions of the Universal Approximation Theorem in increasing levels of detail. For other examples of details-on-demand for text, such as application in code documentation, see this small collection of examples .

Previewing Content

Details-on-demand can also be used as a method for previewing content without committing to another interaction or change of view. For example, when hovering over a hyperlink on Wikipedia, a preview card is shown that can contain an image and brief description; this gives readers a quick preview of the topic without clicking through and loading a new page . This idea is also not new: work from human-computer interaction explored fluid links within hypertext that present information about a particular topic in a location that does not obscure the source material. Both older and modern preview techniques use perceptually-based animation and simple tooltips to ensure their interactions are natural and lightweight feeling to readers .

Challenges for Authoring Interactives

If interactive articles provide clear benefits over other mediums for communicating complex ideas, then why aren’t they more prevalent?

Unfortunately, creating interactive articles today is difficult. Domain-specific diagrams, the main attraction of many interactive articles, must be individually designed and implemented, often from scratch. Interactions need to be intuitive and performant to achieve a nice reading experience. Needless to say, the text must also be well-written, and, ideally, seamlessly integrated with the graphics.

The act of creating a successful interactive article is closer to building a website than writing a blog post, often taking significantly more time and effort than a static article, or even an academic publication.As a proxy, see the number of commits on an example Distill article. Most interactive articles are created using general purpose web-development frameworks which, while expressive, can be difficult to work with for authors who are not also web developers. Even for expert web developers, current tools offer lower levels of abstraction than may be desired to prototype and iterate on designs.

While there are some tools that help with alleviating this problem , they are relatively immature and mainly help with reducing the necessary programming tedium. Tools like Idyll can help authors start writing quickly and even enable rapid iteration through various designs (for example, letting an author quickly compare between sequencing content using a “scroller” or “stepper” based layout). However, Idyll does not offer any design guidance, help authors think through where interactivity would be most effectively applied, nor highlight how their content could be improved to increase its readability and memorability. For example, Idyll encodes no knowledge of the positive impact of self-explanation, instead it requires authors to be familiar with this research and how to operationalize it.

To design an interactive article successfully requires a diverse set of editorial, design, and programming skills. While some individuals are able to author these articles on their own, many interactive articles are created by a collective team consisting of multiple members with specialized skills, for example, data analysts, scripters, editors, journalists, graphic designers, and typesetters, as outlined in . The current generation of authoring tools do not acknowledge this collaboration. For example, to edit only the text of this article requires one to clone its source code using git, install project-specific dependencies using a terminal, and be comfortable editing HTML files. All of this complexity is incidental to task of editing text.

Publishing to the web brings its own challenges: while interactive articles are available to anyone with a browser, they are burdened by rapidly changing web technologies that could break interactive content after just a few years. For this reason, easy and accessible interactive article archival is important for authors to know their work can be confidently preserved indefinitely to support continued readership.This challenge has been pointed out by the community. Authoring interactive articles also requires designing for a diverse set of devices, for example, ensuring bespoke content can be adapted for desktop and mobile screen sizes with varying connection speeds, since accessing interactive content demands more bandwidth.

There are other non-technical limitations for publishing interactive articles. For example, in non-journalism domains, there is a mis-aligned incentive structure for authoring and publishing interactive content: why should a researcher spend time on an “extra” interactive exposition of their work when they could instead publish more papers, a metric by which their career depends on? While different groups of people seek to maximize their work’s impact, legitimizing interactive artifacts requires buy-in from a collective of communities.

Making interactive articles accessible to people with disabilities is an open challenge. The dynamic medium exacerbates this problem compared to traditional static writing, especially when articles combine multiple formats like audio, video, and text. Therefore, ensuring interactive articles are accessible to everyone will require alternative modes of presenting content (e.g. text-to-speech, video captioning, data physicalization, data sonification) and careful interaction design.

It is also important to remember that not everything needs to be interactive. Authors should consider the audience and context of their work when deciding if use of interactivity would be valuable. In the worst case, interactivity may be distracting to readers or the functionality may go unused, the author having wasted their time implementing it. However, even in a domain where the potential communication improvement is incremental,In reality, multimedia studies show large effect sizes for improvement of transfer learning in many cases, see Chapter 12 of. at scale (e.g., delivering via the web), interactive articles can still have impact .

Critical Reflections

We write this article not as media theorists, but as practitioners, researchers, and tool builders. While it has never been easier for writers to share their ideas online, current publishing tools largely support only static authoring and do not take full advantage of the fact that the web is a dynamic medium. We want that to change, and we are not alone. Others from the explorable explanations community have identified design patterns that help share complex ideas through play .

To explore these ideas further, two of this work’s authors created The Parametric Press: an annually published digital magazine that showcases the expository power that interactive dynamic media can have when effectively combined . In late 2018, we invited writers to respond to a call for proposals for our first issue focusing on exploring scientific and technological phenomena that stand to shape society at large. We sought to cover topics that would benefit from using the interactive or otherwise dynamic capabilities of the web. Given the challenges of authoring interactive articles, we did not ask authors to submit fully developed pieces. Instead, we accepted idea submissions, and collaborated with the authors over the course of four months to develop the issue, offering technical, design, and editorial assistance collectively to the authors that lacked experience in one of these areas. For example, we helped a writer implement visualizations, a student frame a cohesive narrative, and a scientist recap history and disseminate to the public. Multiple views from one article are shown in 10.

We see The Parametric Press as a crucial connection between the often distinct worlds of research and practice. The project serves as a platform through which to operationalize the theories put forth by education, journalism, and HCI researchers. Tools like Idyll which are designed in a research setting need to be validated and tested to ensure that they are of practical use; The Parametric Press facilitates this by allowing us to study its use in a real-world setting, by authors who are personally motivated to complete their task of constructing a high-quality interactive article, and only have secondary concerns and care about the tooling being used, if at all.

Through The Parametric Press, we saw the many challenges of authoring, designing, and publishing first hand, dually as researchers and practitioners. 2 summarizes interactive communication opportunities from both research and practice.

As researchers we can treat the project as a series of case studies, where we were observers of the motivation and workflows which were used to craft the stories, from their initial conception to their publication. Motivation to contribute to the project varied by author. Where some authors had personal investment in an issue or dataset they wanted to highlight and raise awareness to broadly, others were drawn towards the medium, recognizing its potential but not having the expertise or support to communicate interactively. We also observed how research software packages like Apparatus , Idyll , and D3 fit into the production of interactive articles, and how authors must combine these disparate tools to create an engaging experience for readers. In one article, “On Particle Physics,” an author combined two tools in a way that allowed him to create and embed dynamic graphics directly into his article without writing any code beyond basic markup. One of the creators of Apparatus had not considered this type of integration before, and upon seeing the finished article commented, “That’s fantastic! Reading that article, I had no idea that Apparatus was used. This is a very exciting proof-of-concept for unconventional explorable-explanation workflows.”

We were able to provide editorial guidance to the authors drawing on our knowledge of empirical studies done in the multimedia learning and information visualization communities to recommend graphical structures and page layouts, helping each article’s message be communicated most effectively. One of the most exciting outcomes of the project is that we saw authors develop interactive communication skills like any other skill: through continued practice, feedback, and iteration. We also observed the challenges that are inherent in publishing dynamic content on the web and identified the need for improved tooling in this area, specifically around the archiving of interactive articles. Will an article’s code still run a year from now? Ten years from now? To address interactive content archival, we set up a system to publish a digital archive of all of our articles at the time that they are first published to the site. At the top of each article on The Parametric Press is an archive link that allows readers to download a WARC (Web ARChive) file that can “played back” without requiring any web infrastructure. While our first iteration of the project relied on ad-hoc solutions to these problems, we hope to show how digital works such as ours can be published confidently knowing that they will be preserved indefinitely.

As practitioners we pushed the boundaries of the current generation of tools designed to support the creation of interactive articles on the web. We found bugs and limitations in Idyll, a tool which was originally designed to support the creation of one-off articles that we used as a content management system to power an entire magazine issue. We were forced to write patches and plugins to work around the limitations and achieve our desired publication.Many of these patches have since been merged to Idyll itself. This is the power of modular open-source tooling in action. We were also forced to craft designs under a more realistic set of constraints than academics usually deal with: when creating a visualization it is not enough to choose the most effective visual encodings, the graphics also had to be aesthetically appealing, adhere to a house style, have minimal impact on page load time and runtime performance, be legible on both mobile and desktop devices, and not be overly burdensome to implement. Any extra hour spent implementing one graphic was an hour that was not spent improving some other part of the issue, such as the clarity of the text, or the overall site design.

There are relatively few outlets that have the skills, technology, and desire to publish interactive articles. From its inception, one of the objectives of The Parametric Press is to showcase the new forms of media and publishing that are possible with tools available today, and inspire others to create their own dynamic writings. For example, Omar Shehata, the authors of The Parametric Press article “Unraveling the JPEG,” told us he had wanted to write this interactive article for years yet never had the opportunity, support, or incentive to create it. His article drew wide interest and critical acclaim.

We also wanted to take the opportunity as an independent publication to serve as a concrete example for others to follow, to represent a set of best practices for publishing interactive content. To that end, we made available all of the software that runs the site, including reusable components, custom data visualizations, and the publishing engine itself.

Looking Forward

A diverse community has emerged to meet these challenges, exploring and experimenting with what interactive articles could be. The Explorable Explanations community is a “disorganized ‘movement’ of artists, coders & educators who want to reunite play and learning.” Their online hub contains 170+ interactive articles on topics ranging from art, natural sciences, social sciences, journalism, and civics. The curious can also find tools, tutorials, and meta-discussion around learning, play, and representations. Explorables also hosted a mixed in-person and online Jam: a community-based sprint focused on creating new explorable explanations. 11 highlights a subset of the interactive articles created during the Jam.

Many interactive articles are self-published due to a lack of platforms that support interactive publishing. Creating more outlets that allow authors to publish interactive content will help promote their development and legitimization. The few existing examples, including newer journals such as Distill, academic workshops like VISxAI , open-source publications like The Parametric Press , and live programming notebooks like Observable help, but currently target a narrow group of authors, namely those who have programming skills. Such platforms should also provide clear paths to submission, quality and editorial standards, and authoring guidelines. For example, news outlets have clear instructions for pitching written pieces, yet this is under-developed for interactive articles. Lastly, there is little funding available to support the development of interactive articles and the tools that support them. Researchers do not receive grants to communicate their work, and practitioners outside of the largest news outlets are not able to afford the time and implementation investment. Providing more funding for enabling interactive articles incentivizes their creation and can contribute to a culture where readers expect digital communications to better utilize the dynamic medium.

We have already discussed the breadth of skills required to author an interactive article. Can we help lower the barrier to entry? While there have been great, practical strides in this direction , there is still opportunity for creating tools to design, develop, and evaluate interactive articles in the wild. Specific features should include supporting mobile-friendly adaptations of interactive graphics (for example ), creating content for different platforms besides just the web, and tools that allow people to create interactive content without code.

The usefulness of interactive articles is predicated on the assumption that these interactive articles actually facilitate communication and learning. There is limited empirical evaluation of the effectiveness of interactive articles. The problem is exacerbated by the fact that large publishers are unwilling to share internal metrics, and laboratory studies may not generalize to real world reading trends. The New York Times provided one of the few available data points, stating that only a fraction of readers interact with non-static content, and suggested that designers should move away from interactivity . However, other research found that many readers, even those on mobile devices, are interested in utilizing interactivity when it is a core part of the article’s message . This statement from The New York Times has solidified as a rule-of-thumb for designers and many choose not to utilize interactivity because of it, despite follow-up discussion that contextualizes the original point and highlights scenarios where interactivity can be beneficial . This means designers are potentially choosing a suboptimal presentation of their story due to this anecdote. More research is needed in order to identify the cases in which interactivity is worth the cost of creation.

We believe in the power and untapped potential of interactive articles for sparking reader’s desire to learn and making complex ideas accessible and understandable to all.

Acknowledgments

We are grateful to Arvind Satyanarayan for his early encouragement for pursuing this work, and Ludwig Schubert for his prompt help in fixing templating issues. We also thank The Parametric Press editors and authors for their continued support of the project, and to the Explorables community for their creativity and inspiration.

This work was supported in part by a NASA Space Technology Fellowship.

The birdsongs were provided by the users of https://www.xeno-canto.org/.

Author Contributions

Research: After initial conversations over two years ago, Fred and Matthew jointly conducted the research bootstrapping early ideas from Matthew, including distilling literature, pulling published examples, and formulating the structure of the work.

Writing & Graphics: Fred and Matthew also jointly wrote the text and collaborated on the design and implementation of the interactive graphics.

References

  1. Report on the role of digital access providers  [link]
    OHCHR,, 2017. United Nations Human Rights Office of the High Commissioner.
  2. A personal computer for children of all ages  [link]
    Kay, A.C., 1972. Proceedings of the ACM Annual Conference.
  3. Augmenting human intellect: A conceptual framework  [link]
    Engelbart, D.C., 1962. Menlo Park, CA.
  4. The diamond age
    Stephenson, N., 1998. Penguin UK.
  5. The knowledge navigator  [link]
    Dubberly, H. and Mitch, D., 1987. Apple Computer, Inc.
  6. Getting it out of our system
    Nelson, T.H., 1967. Information Retrieval: A Critical Review, pp. 191--210. Thompson Books.
  7. PLATO  [link]
    UI,, 1960. University of Illinois.
  8. PhET interactive simulations  [link]
    CU,, 2002. University of Colorado Boulder.
  9. Explorable explanations  [link]
    Victor, B., 2011.
  10. How y’all, youse and you guys talk  [HTML]
    Katz, J. and Andrews, W., 2013. The New York Times.
  11. Snow fall: The avalanche at tunnel creek  [HTML]
    Branch, J., 2014. The New York Times.
  12. Why outbreaks like coronavirus spread exponentially, and how to 'flatten the curve'  [link]
    Stevens, H., 2020. The Washington Post.
  13. Attacking discrimination with smarter machine learning  [link]
    Wattenberg, M., Viégas, F. and Hardt, M., 2016. Google Research.
  14. Coeffects: Context-aware programming languages  [link]
    Petricek, T., 2017.
  15. Complexity explained  [link]
    De Domenico, M. and Sayama, H., 2019.
  16. What's really warming the world  [link]
    Roston, E. and Migliozzi, B., 2015. Bloomberg.
  17. You draw it: How family income predicts children’s college chances  [HTML]
    Aisch, G., Cox, A. and Quealy, K., 2015. The New York Times.
  18. The Uber Game  [link]
    Blood, D., Kao, J.S., Knoll, N., Kwong, R., Locke, C. and Rininsland, Æ., 2017. Financial Times.
  19. Let's learn about waveforms  [link]
    Comeau, J., 2018. The Pudding.
  20. The book of shaders  [link]
    Vivo, P.G. and Lowe, J., 2015.
  21. EconGraphs  [link]
    Makler, C., 2017.
  22. To build a better ballot  [link]
    Case, N., 2016.
  23. The atlas of redistricting  [link]
    Bycoffe, A., Koeze, E., Wasserman, D. and Wolfe, J., 2018. FiveThirtyEight.
  24. Is it better to rent or buy  [HTML]
    Bostock, M., Carter, S. and Tse, A., 2014. The New York Times.
  25. Explorable explanation  [link]
    2019. Wikipedia.
  26. Increasing the transparency of research papers with explorable multiverse analyses  [link]
    Dragicevic, P., Jansen, Y., Sarma, A., Kay, M. and Chevalier, F., 2019. Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, pp. 65.
  27. Workshop on Visualization for AI Explainability  [link]
    VISxAI,, 2018. IEEE Visualization.
  28. Exploranation: A new science communication paradigm  [link]
    Ynnerman, A., Löwgren, J. and Tibell, L., 2018. IEEE computer graphics and applications, Vol 38(3), pp. 13--20. IEEE.
  29. Research debt  [link]
    Olah, C. and Carter, S., 2017. Distill.
  30. More than telling a story: Transforming data into visually shared stories  [link]
    Lee, B., Riche, N.H., Isenberg, P. and Carpendale, S., 2015. IEEE Computer Graphics and Applications, Vol 35(5), pp. 84--90. IEEE.
  31. "Concrete" computer manipulatives in mathematics education  [link]
    Sarama, J. and Clements, D.H., 2009. Child Development Perspectives, Vol 3(3), pp. 145--150. Wiley Online Library.
  32. Cybertext: Perspectives on ergodic literature
    Aarseth, E.J., 1997. JHU Press.
  33. Interactive non-fiction: Towards a new approach for storytelling in digital journalism  [link]
    Sizemore, J.H. and Zhu, J., 2011. International Conference on Interactive Digital Storytelling, pp. 313--316.
  34. Active essays on the web  [link]
    Yamamiya, T., Warth, A. and Kaehler, T., 2009. 2009 Seventh International Conference on Creating, Connecting and Collaborating through Computing, pp. 3--10.
  35. Newsgames: Journalism at play
    Bogost, I., Ferrari, S. and Schweizer, B., 2012. Mit Press.
  36. Simply bells and whistles? Cognitive effects of visual aesthetics in digital longforms  [link]
    Greussing, E. and Boomgaarden, H.G., 2019. Digital Journalism, Vol 7(2), pp. 273--293. Taylor & Francis.
  37. Learning as a function of time  [link]
    Fredrick, W.C. and Walberg, H.J., 1980. The Journal of Educational Research, Vol 73(4), pp. 183--194. Taylor & Francis.
  38. Emotional design in multimedia learning  [link]
    Um, E., Plass, J.L., Hayward, E.O. and Homer, B.D., 2012. Journal of Educational Psychology, Vol 104(2), pp. 485. American Psychological Association.
  39. Hooked on data videos: assessing the effect of animation and pictographs on viewer engagement  [link]
    Amini, F., Riche, N.H., Lee, B., Leboe-McGowan, J. and Irani, P., 2018. Proceedings of the 2018 International Conference on Advanced Visual Interfaces, pp. 1--9.
  40. Animation: Can it facilitate?  [link]
    Tversky, B., Morrison, J.B. and Betrancourt, M., 2002. International Journal of Human-computer Studies, Vol 57(4), pp. 247--262. Elsevier.
  41. Animated transitions in statistical data graphics  [link]
    Heer, J. and Robertson, G., 2007. IEEE Transactions on Visualization and Computer Graphics, Vol 13(6), pp. 1240--1247. IEEE.
  42. Hypothetical outcome plots outperform error bars and violin plots for inferences about reliability of variable ordering  [link]
    Hullman, J., Resnick, P. and Adar, E., 2015. PlOS One, Vol 10(11), pp. e0142444. Public Library of Science.
  43. La perception de la causalité.(Etudes Psychol.), Vol. VI
    Michotte, A., 1946. Inst. Sup. De Philosophie.
  44. The illusion of life: Disney animation
    Thomas, F., Johnston, O. and Thomas, F., 1995. Hyperion New York.
  45. The horse in motion  [link]
    Muybridge, J., 1882. Nature, Vol 25(652), pp. 605. Nature Publishing Group.
  46. Emergent tool use from multi-agent autocurricula  [PDF]
    Baker, B., Kanitscheider, I., Markov, T., Wu, Y., Powell, G., McGrew, B. and Mordatch, I., 2019. arXiv preprint arXiv:1909.07528.
  47. Climate spirals  [link]
    Hawkins, E., 2016. Climate Lab Book.
  48. Earth's relentless warming sets a brutal new record in 2017  [link]
    Randall, T. and Migliozzi, B., 2018. Bloomberg.
  49. Global temperature  [link]
    NASA,, 2020. NASA Global Climate Change.
  50. It's not your imagination. Summers are getting hotter.  [HTML]
    Popovich, N. and Pearce, A., 2017. The New York Times.
  51. Extensive data shows punishing reach of racism for black boys  [HTML]
    Badger, E., Miller, C.C., Pearce, A. and Quealy, K., 2018. The New York Times.
  52. Disagreements  [link]
    Cox, A. and Quealy, K., 2018. OpenVisConf.
  53. Gun deaths in america  [link]
    Casselman, B., Conlen, M. and Fischer-Baum, R., 2016. FiveThirtyEight.
  54. The fallen of World War II  [link]
    Halloran, N., 2015.
  55. Showing people behind data: Does anthropomorphizing visualizations elicit more empathy for human rights data?  [link]
    Boy, J., Pandey, A.V., Emerson, J., Satterthwaite, M., Nov, O. and Bertini, E., 2017. Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems, pp. 5462--5474.
  56. Beyond memorability: Visualization recognition and recall  [link]
    Borkin, M.A., Bylinskii, Z., Kim, N.W., Bainbridge, C.M., Yeh, C.S., Borkin, D., Pfister, H. and Oliva, A., 2015. IEEE Transactions on Visualization and Computer Graphics, Vol 22(1), pp. 519--528. IEEE.
  57. What makes a visualization memorable?  [link]
    Borkin, M.A., Vo, A.A., Bylinskii, Z., Isola, P., Sunkavalli, S., Oliva, A. and Pfister, H., 2013. IEEE Transactions on Visualization and Computer Graphics, Vol 19(12), pp. 2306--2315. IEEE.
  58. What if the data visualization is actually people  [link]
    Slobin, S., 2014. Source.
  59. Ethical dimensions of visualization research  [PDF]
    Correll, M., 2019. Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems, pp. 1--13.
  60. A walk among the data  [link]
    Ivanov, A., Danyluk, K., Jacob, C. and Willett, W., 2019. IEEE Computer Graphics and Applications, Vol 39(3), pp. 19--28. IEEE.
  61. Visual narrative flow: Exploring factors shaping data visualization story reading experiences  [link]
    McKenna, S., Henry Riche, N., Lee, B., Boy, J. and Meyer, M., 2017. Computer Graphics Forum, Vol 36(3), pp. 377--387.
  62. Linking and layout: Exploring the integration of text and visualization in storytelling  [link]
    Zhi, Q., Ottley, A. and Metoyer, R., 2019. Computer Graphics Forum, Vol 38(3), pp. 675--685.
  63. Video games and learning
    Squire, K., 2011. Teaching and Participatory Culture in the Digital Age. Teachers College Print.
  64. Cutthroat Capitalism: The Game  [link]
    Webworks, S. and Crothers, D., 2009. Wired.
  65. Combining software games with education: Evaluation of its educational effectiveness  [PDF]
    Virvou, M., Katsionis, G. and Manos, K., 2005. Journal of Educational Technology & Society, Vol 8(2), pp. 54--65. JSTOR.
  66. Narrative visualization: Telling stories with data  [link]
    Segel, E. and Heer, J., 2010. IEEE Transactions on Visualization and Computer Graphics, Vol 16(6), pp. 1139--1148. IEEE.
  67. Parable of the polygons  [link]
    Hart, V. and Case, N., 2016.
  68. Drawing dynamic visualizations  [link]
    Victor, B., 2013.
  69. How to read a book: The classic guide to intelligent reading
    Adler, M.J. and Van Doren, C., 2014. Simon and Schuster.
  70. Scientific communication as sequential art  [link]
    Victor, B., 2011.
  71. How you will die  [link]
    Yau, N., 2016. Flowing Data.
  72. On Particle Physics  [link]
    Bianchi, R.M., Hohman, F. and Conlen, M., 2019. The Parametric Press.
  73. Should prison sentences be based on crimes that haven’t been committed yet  [link]
    Barry-Jester, A.M., Casselman, B. and Goldstein, D., 2015. FiveThirtyEight.
  74. How to use t-SNE effectively  [link]
    Wattenberg, M., Viégas, F. and Johnson, I., 2016. Distill, Vol 1(10), pp. e2.
  75. The beginner's guide to dimensionality reduction  [link]
    Conlen, M. and Hohman, F., 2018. VISxAI at IEEE VIS.
  76. Understanding UMAP  [link]
    Coenen, A. and Pearce, A., 2019. Google PAIR.
  77. Tensorflow.js: Machine learning for the web and beyond  [PDF]
    Smilkov, D., Thorat, N., Assogba, Y., Yuan, A., Kreeger, N., Yu, P., Zhang, K., Cai, S., Nielsen, E., Soergel, D. and others,, 2019. arXiv preprint arXiv:1901.05350.
  78. Designing (and learning from) a teachable machine  [link]
    Webster, B., 2018. Google Design.
  79. Experiments in handwriting with a neural network  [link]
    Carter, S., Ha, D., Johnson, I. and Olah, C., 2016. Distill.
  80. Direct-manipulation visualization of deep networks
    Smilkov, D., Carter, S., Sculley, D., Viégas, F.B. and Wattenberg, M., 2017. arXiv preprint arXiv:1708.03788.
  81. Gan lab: Understanding complex deep generative models using interactive visual experimentation  [link]
    Kahng, M., Thorat, N., Chau, D.H.P., Viégas, F.B. and Wattenberg, M., 2018. IEEE Transactions on Visualization and Computer Graphics, Vol 25(1), pp. 1--11. IEEE.
  82. Using artificial intelligence to augment human intelligence  [link]
    Carter, S. and Nielsen, M., 2017. Distill, Vol 2(12), pp. e9.
  83. Who will win the presidency  [link]
    2016. FiveThirtyEight.
  84. Who will be president  [HTML]
    Katz, J., 2016. The New York Times.
  85. Live results: Presidential election  [link]
    2016. The Washington Post.
  86. Multimedia learning  [link]
    Mayer, R.E., 2002. Psychology of Learning and Motivation, Vol 41, pp. 85--139. Elsevier.
  87. 3Blue1Brown  [link]
    Sanderson, G.. Youtube.
  88. Primer  [link]
    Helps, J.. Youtube.
  89. Revising the redundancy principle in multimedia learning  [link]
    Mayer, R.E. and Johnson, C.I., 2008. Journal of Educational Psychology, Vol 100(2), pp. 380. American Psychological Association.
  90. Visualizing quaternions: An explorable video series  [link]
    Sanderson, G. and Eater, B., 2018.
  91. Self-explanations: How students study and use examples in learning to solve problems
    Chi, M.T., Bassok, M., Lewis, M.W., Reimann, P. and Glaser, R., 1989. Cognitive Science, Vol 13(2), pp. 145--182. Elsevier.
  92. Self-explaining expository texts: The dual processes of generating inferences and repairing mental models
    Chi, M.T., 2000. Advances in Instructional Psychology, Vol 5, pp. 161--238.
  93. Explaining the gap: Visualizing one's predictions improves recall and comprehension of data
    Kim, Y., Reinecke, K. and Hullman, J., 2017. Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems, pp. 1375--1386.
  94. You draw it: Just how bad is the drug overdose epidemic  [HTML]
    Katz, J., 2017. The New York Times.
  95. You draw it: What got better or worse during Obama's presidency  [HTML]
    Buchanan, L., Park, H. and Pearce, A., 2017. The New York Times.
  96. They draw it!  [link]
    Nguyen, F., Kim, Y., Germuska, J. and Hullman, J., 2019. Midwest Uncertainty Collective and The Knight Lab..
  97. Data through others' eyes: The impact of visualizing others' expectations on visualization interpretation  [link]
    Kim, Y., Reinecke, K. and Hullman, J., 2017. IEEE Transactions on Visualization and Computer Graphics, Vol 24(1), pp. 760--769. IEEE.
  98. The Gyllenhaal experiment  [link]
    Goldenberg, R. and Daniels, M., 2019. The Pudding.
  99. How do you draw a circle? We analyzed 100,000 drawings to show how culture shapes our instincts  [link]
    Ha, T. and Sonnad, N., 2017. Quartz.
  100. Recitation as a factor in memorizing
    Gates, A.I., 1922. Science Press.
  101. The power of testing memory: Basic research and implications for educational practice  [link]
    Roediger III, H.L. and Karpicke, J.D., 2006. Perspectives on Psychological Science, Vol 1(3), pp. 181--210. SAGE Publications Sage CA: Los Angeles, CA.
  102. Khan Academy  [link]
    2008.
  103. The instructional effect of feedback in test-like events
    Bangert-Drowns, R.L., Kulik, C.C., Kulik, J.A. and Morgan, M., 1991. Review of Educational Research, Vol 61(2), pp. 213--238. Sage Publications Sage CA: Thousand Oaks, CA.
  104. The critical importance of retrieval for learning  [link]
    Karpicke, J.D. and Roediger, H.L., 2008. Science, Vol 319(5865), pp. 966--968. American Association for the Advancement of Science.
  105. How to remember anything for forever-ish  [link]
    Case, N., 2018.
  106. Quantum country  [link]
    Matuschak, A. and Nielsen, M.A., 2019.
  107. Intrinsic motivation and the process of learning: Beneficial effects of contextualization, personalization, and choice.  [link]
    Cordova, D.I. and Lepper, M.R., 1996. Journal of Educational Psychology, Vol 88(4), pp. 715. American Psychological Association.
  108. Authoring and generation of individualized patient education materials  [link]
    Di Marco, C., Bray, P., Covvey, H.D., Cowan, D.D., Di Ciccio, V., Hovy, E., Lipa, J. and Yang, C., 2006. AMIA Annual Symposium Proceedings, Vol 2006, pp. 195.
  109. PersaLog: Personalization of news article content  [HTML]
    Adar, E., Gearig, C., Balasubramanian, A. and Hullman, J., 2017. Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems, pp. 3188--3200.
  110. Generating personalized spatial analogies for distances and areas  [link]
    Kim, Y., Hullman, J. and Agrawala, M., 2016. Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems, pp. 38--48.
  111. How much hotter is your hometown than when you were born  [HTML]
    Popvich, N., Migliozzi, B., Taylor, R., Williams, J. and Watkins, D., 2018. The New York Times.
  112. Human terrain  [link]
    Daniels, M., 2018. The Pudding.
  113. Are you rich? This income-rank quiz might change how you see yourself  [HTML]
    Quealy, K., Gebeloff, R. and Taylor, R., 2019. The New York Times.
  114. Quiz: Let us predict whether you’re a democrat or a republican  [HTML]
    Chinoy, S., 2019. The New York Times.
  115. Find Out If Your Job Will Be Automated  [link]
    Whitehouse, M. and Rojanasakul, M., 2017. Bloomberg.
  116. Booze calculator: What's your drinking nationality  [link]
    Lowther, E., Huynh, L., Bryson, M. and Connor, S., 2017. BBC.
  117. Click 1,000: How the pick-your-own-path episode was made  [link]
    Beckett, S., 2019. BBC.
  118. E-learning and the science of instruction: Proven guidelines for consumers and designers of multimedia learning
    Clark, R.C. and Mayer, R.E., 2016. John Wiley & Sons.
  119. Multimedia learning in an interactive self-explaining environment: What works in the design of agent-based microworlds?  [link]
    Mayer, R.E., Dow, G.T. and Mayer, S., 2003. Journal of Educational Psychology, Vol 95(4), pp. 806. American Psychological Association.
  120. Pictorial aids for learning by doing in a multimedia geology simulation game.  [link]
    Mayer, R.E., Mautone, P. and Prothero, W., 2002. Journal of Educational Psychology, Vol 94(1), pp. 171. American Psychological Association.
  121. A visual introduction to machine learning  [link]
    Yee, S. and Chu, T., 2015. R2D3.
  122. Beyond guidelines: What can we learn from the visual information seeking mantra?  [link]
    Craft, B. and Cairns, P., 2005. Ninth International Conference on Information Visualisation (IV'05), pp. 110--118.
  123. The eyes have it: A task by data type taxonomy for information visualizations  [link]
    Shneiderman, B., 1996. Proceedings 1996 IEEE Symposium on Visual Languages, pp. 336--343.
  124. Information visualization and visual data mining  [link]
    Keim, D.A., 2002. IEEE Transactions on Visualization and Computer Graphics, Vol 8(1), pp. 1--8. IEEE.
  125. How the recession shaped the economy, in 255 charts  [HTML]
    Ashkenas, J. and Parlapiano, A., 2014. The New York Times.
  126. How does the eye work  [link]
    2018. Explorable Explanations Game Jam.
  127. Earth primer  [link]
    Gingold, C., 2015.
  128. Progressive growing of gans for improved quality, stability, and variation  [PDF]
    Karras, T., Aila, T., Laine, S. and Lehtinen, J., 2018. International Conference on Learning Representations.
  129. A style-based generator architecture for generative adversarial networks  [HTML]
    Karras, T., Laine, S. and Aila, T., 2019. Proceedings of the IEEE Conference on Computer Vision and Pattern Recognition, pp. 4401--4410.
  130. Why momentum really works  [link]
    Goh, G., 2017. Distill.
  131. Colorized math equations  [link]
    Azad, K., 2017. Better Explained.
  132. Image kernels  [link]
    Powell, V., 2015. Setosa.
  133. Stretchtext – hypertext note #8
    Nelson, T., 1967. Project Xanadu.
  134. On variable level-of-detail documents  [link]
    Beecroft, W., 2016.
  135. Call for proposals winter/spring 2019  [link]
    2019. The Parametric Press.
  136. A UI that lets readers control how much information they see  [link]
    Basques, K., 2018.
  137. Wikipedia Preview Card  [link]
    Vasileva, O., 2018. Wikipedia.
  138. Fluid links for informed and incremental link transitions  [link]
    Zellweger, P., Chang, B. and Mackinlay, J.D., 1998. Proceedings of Hypertext.
  139. Reading and writing fluid hypertext narratives  [link]
    Zellweger, P.T., Mangen, A. and Newman, P., 2002. Proceedings of the Thirteenth ACM Conference on Hypertext and Hypermedia, pp. 45--54.
  140. Idyll: A markup language for authoring and publishing interactive articles on the web  [link]
    Conlen, M. and Heer, J., 2018. Proceedings of the 31st Annual ACM Symposium on User Interface Software and Technology, pp. 977--989.
  141. Apparatus: A hybrid graphics editor and programming environment for creating interactive diagrams  [link]
    Schachman, T., 2015. Apparatus.
  142. Observable  [link]
    2019.
  143. LOOPY: a tool for thinking in systems  [link]
    Case, N., 2017.
  144. Webstrates: shareable dynamic media  [link]
    Klokmose, C.N., Eagan, J.R., Baader, S., Mackay, W. and Beaudouin-Lafon, M., 2015. Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology, pp. 280--290.
  145. Neural networks and deep learning  [link]
    Nielsen, M.A., 2015. Determination Press.
  146. How I make explorable explanations  [link]
    Case, N., 2017.
  147. Explorable explanations: 4 more design patterns  [link]
    Case, N., 2018.
  148. Emerging and recurring data-driven storytelling techniques: Analysis of a curated collection of recent stories  [link]
    Stolper, C.D., Lee, B., Riche, N.H. and Stasko, J., 2016. Microsoft Research.
  149. Issue 01: Science & Society  [link]
    Conlen, M., Hohman, F., Uren, V., Stalla, S. and Sass, A., 2018. The Parametric Press.
  150. The myth of the impartial machine  [link]
    Feng, A., Wu, S., Hohman, F., Conlen, M. and Stalla, S., 2019. The Parametric Press.
  151. D3 data-driven documents  [link]
    Bostock, M., Ogievetsky, V. and Heer, J., 2011. IEEE Transactions on Visualization and ccomputer Graphics, Vol 17(12), pp. 2301--2309. IEEE.
  152. Launching the Parametric Press  [link]
    Conlen, M. and Hohman, F., 2019. Visualization for Communication (VisComm) at IEEE VIS.
  153. Techniques for flexible responsive visualization design  [link]
    Hoffswell, J., Li, W. and Liu, Z., 2020. Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems.
  154. A Comparative Evaluation of Animation and Small Multiples for Trend Visualization on Mobile Phones  [link]
    Brehmer, M., Lee, B., Isenberg, P. and Choe, E.K., 2019. IEEE Transactions on Visualization and Computer Graphics, Vol 26(1), pp. 364--374. IEEE.
  155. Visualizing ranges over time on mobile phones: a task-based crowdsourced evaluation  [link]
    Brehmer, M., Lee, B., Isenberg, P. and Choe, E.K., 2018. IEEE Transactions on Visualization and Computer Graphics, Vol 25(1), pp. 619--629. IEEE.
  156. Why we are doing fewer interactives  [PDF]
    Tse, A., 2016. Malofiej Infographics World Summit.
  157. Capture & analysis of active reading behaviors for interactive articles on the web  [link]
    Conlen, M., Kale, A. and Heer, J., 2019. Computer Graphics Forum, Vol 38(3), pp. 687--698.
  158. In defense of interactive graphics  [link]
    Aisch, G., 2017.

Updates and Corrections

If you see mistakes or want to suggest changes, please create an issue on GitHub.

Reuse

Diagrams and text are licensed under Creative Commons Attribution CC-BY 4.0 with the source available on GitHub, unless noted otherwise. The figures that have been reused from other sources don’t fall under this license and can be recognized by a note in their caption: “Figure from …”.

Citation

For attribution in academic contexts, please cite this work as

Hohman, et al., "Communicating with Interactive Articles", Distill, 2020.

BibTeX citation

@article{hohman2020communicating,
  author = {Hohman, Fred and Conlen, Matthew and Heer, Jeffrey and Chau, Duen Horng (Polo)},
  title = {Communicating with Interactive Articles},
  journal = {Distill},
  year = {2020},
  note = {https://distill.pub/2020/communicating-with-interactive-articles},
  doi = {10.23915/distill.00028}
}
is dedicated to clear explanations of machine learning
About Submit Prize Archive RSS GitHub Twitter      ISSN 2476-0757